<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useSelectFile } from '@renderer/hooks/useSelectFile'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  import useConvert from '@renderer/hooks/useConvert'

  // 获取 settingsStore
  const settingsStore = useSettingsStore()

  const { progressNotice } = useConvert()

  const dropAreaRef = ref<HTMLDivElement | null>(null)

  // 使用选择文件钩子
  const { isDragging, fileInputRef, selectFile, handleFileChange, setupDropArea } = useSelectFile({
    accept: '.mp4,.avi,.mov,.mkv,.flv',
    multiple: true
    // onSelect: (files) => {},
    // onError: (error) => {
    //   console.error('文件选择错误:', error.message)
    //   // 这里可以添加错误提示
    // }
  })

  // 在组件挂载时设置拖放区域
  onMounted(() => {
    progressNotice()
    if (dropAreaRef.value) {
      const cleanup = setupDropArea(dropAreaRef.value)
      // 组件卸载时清理事件监听器
      if (cleanup) {
        onUnmounted(cleanup) // 如果需要在组件卸载时清理
      }
    }
  })
</script>

<template>
  <div class="file-drop-area" :class="{ active: isDragging }" ref="dropAreaRef">
    <input
      type="file"
      ref="fileInputRef"
      @change="handleFileChange"
      accept=".mp4,.avi,.mov,.mkv,.flv"
      style="display: none"
      multiple
    />

    <template v-if="settingsStore.files.length === 0">
      <div class="i-carbon-cloud-upload mb-4 text-4xl text-gray-400"></div>
      <h3 class="mb-2 text-lg text-gray-700 font-medium">拖放文件到这里</h3>
      <p class="mb-4 text-center text-gray-500">支持 MP4, AVI, MOV, MKV, FLV 等格式</p>
      <button class="primary-btn flex items-center justify-center" @click="selectFile">
        <Icon name="i-carbon-add" class="mr-2"></Icon>
        <span>选择文件</span>
      </button>
    </template>

    <template v-else>
      <div class="w-full">
        <h3 class="mb-4 text-lg text-gray-700 font-medium">已选择文件</h3>
        <div class="file-list">
          <VideoItem
            v-for="(file, index) in settingsStore.files"
            :file="file"
            :key="index"
          ></VideoItem>
        </div>
        <div class="mt-4 flex justify-center">
          <button class="secondary-btn flex flex-row" @click="settingsStore.clearFiles()">
            <Icon name="i-carbon-reset" class="mr-2"></Icon>
            <span>重新选择</span>
          </button>
        </div>
      </div>
    </template>
  </div>
</template>
<style lang="scss" scoped>
  .action-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #4b5563;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;

    &:hover {
      background-color: #f9fafb;
    }
  }

  .primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 5px 15px rgb(102 126 234 / 30%);
      transform: translateY(-2px);
    }
  }

  .secondary-btn {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: #4b5563;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:hover {
      background-color: #f9fafb;
    }
  }

  .file-drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 2px dashed #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease;

    &:hover,
    &.active {
      background-color: rgb(102 126 234 / 5%);
      border-color: #667eea;
    }
  }

  .file-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
  }
</style>
